<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<style type="text/css">
			.red{
				color: red;
			}
			.big{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!--
			如果使用vue的话，必须要绑定一个id
		-->
		<div id="app">
			<p class="red big">黑马程序员</p>
			<!--
				在使用vue的时候，设置class，需要通过：开头
				如果在vue里面也想设置多个class，那么就需要通过逗号进行分隔开
				修改class的语法是{}开始
			-->
			<p :class="{red:isRed,big:isBig }">黑马程序员</p>
			<!--
				如果使用的是大括号，那么里面的值不需要添加引号，
				如果使用的是中括号，那么里面的值，必须添加引号
				v-bind:v开头表示指令，可以直接缩写：
			-->
			<p :class="[ok?'red':'']">黑马程序员</p>
		</div>		
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				// data可以动态控制是想添加class，还是想删除clas
				// data里面的值，必须和上面class里面的值保持一致
				isRed:true,
				isBig:true,
				ok:false
			}
			
		})
		
		
		
		
		
	</script>
</html>
